<template>
    <el-dialog :model-value="visible" :title="add?$t('org.addDialogTitle'):$t('org.editDialogTitle')" width="500px" :before-close="cb=>cancelForm('userFormRef')">
        <el-form
            ref="userFormRef"
            inline
            :model="userForm"
            :rules="validateRules"
            label-width="100px"
        >
            <el-form-item :label="$t('org.parent')" prop="parentId">
                <el-tree-select v-model="userForm.parentId" :data="dropSelectList" value-key="organizationId" :props="{label: 'organizationName',children: 'children'}" 
                   :render-after-expand='false' class="table-item" check-strictly />
                <!-- <select-tree v-model="userForm.parentId" :data="dropSelectList" :props="{label: 'organizationName',children: 'children',key:'organizationId'}" class="table-item"/> -->
            </el-form-item>
            <el-form-item :label="$t('org.organizationName')" prop="organizationName">
                <el-input v-model="userForm.organizationName" class="table-item"></el-input>
            </el-form-item>
            <el-form-item :label="$t('org.organizationOrder')" prop="organizationOrder">
                <el-input v-model.number="userForm.organizationOrder" class="table-item"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="cancelForm('userFormRef')" >{{$t('data.button.cancel')}}</el-button>
            <el-button type="primary" :loading="isSaveing" @click="submitForm('userFormRef')">{{$t('data.button.confirm')}}</el-button>
        </template>
    </el-dialog>
</template>
<script>
export default {
    props:{
        form:{
            type:Object,
            default:()=>{
                return {
                }
            }
        },
        organizationOptions:{
            type:Array,
            default:()=>{
                return []
            }
        },
        add:{
            type:Boolean,
            default:false
        },
        visible:{
            type:Boolean,
            default:false
        },
    },
    emits:['submit','close'],
    data(){
        return{
            userForm:this.form,
            isSaveing:false,
            validateRules:{
                organizationName:[
                    {
                        required: true,
                        message: '请输入机构名称',
                        trigger: 'blur',
                    },
                    {
                        max: 200,
                        message: '不能超过200字',
                        trigger: 'blur',
                    },
                ],
                organizationOrder:[
                    {
                        required: true,
                        message: '请输入序号',
                        trigger: 'blur',
                    },
                    { type: 'number', message: '序号必须为数字' }
                ]
            }
        }
    },
    computed:{
        dropSelectList(){
            return [{organizationId:'',organizationName:this.$t('data.tree.rootText'),children:this.organizationOptions}]
        }
    },
    watch:{
        form:{
            handler:function(){
                this.userForm=this.form
                if(!this.userForm.organizationOrder){
                    this.userForm.organizationOrder=0
                }
                if(!this.userForm.parentId){
                    this.userForm.parentId=''
                }
            },
            deep: true
        }
    },
    methods:{
        submitForm(userFormRef){
            this.$refs[userFormRef].validate(valid=>{
                if(valid){
                    this.$emit('submit',this.userForm);
                }
            })
        },
        cancelForm(userFormRef){
            console.log('cancelForm',this.userForm)
            this.$refs[userFormRef].resetFields()
            this.$emit('close');
        },
    }
}
</script>
<style scoped>
.table-item{
    width:360px;
}
</style>